<template>
    <div id="work">
        <div style="height: 40px; display: flex; margin-left: 10px; justify-content: space-between">
            <div style="color: #fff; font-size: 24px; height: 40px; line-height: 40px; margin-right: 20px">智能监控工作台</div>
            <el-cascader placeholder="所属工厂" :options="options" :show-all-levels="false" v-model="scope_id_list" @change="changeScope"></el-cascader>
        </div>
        <div class="main">
            <div>
                <div class="title">
                    <div class="triangle"></div>
                    <div>设备运行监控</div>
                </div>
                <div class="content" v-if="deviceByStatus.length !== 0" style="display: flex; align-items: center; justify-content: space-between">
                    <div v-for="item in deviceByStatus" :key="item.name" class="health">
                        <div class="top">{{ item.num }}台</div>
                        <div :style="'color: ' + item.color" class="mid">{{ item.name }}</div>
                        <div class="buttom">{{ item.ratio }}%</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">
                    <div class="triangle"></div>
                    <div>设备报警统计</div>
                </div>
                <div class="content" v-if="stat" style="position: relative; left: 5%; top: 0%; width: 90%">
                    <div class="alarm_total">
                        <div class="alarm_data">
                            {{ this.warnList.length }}
                            <span style="color: white; font-size: 16px; font-weight: 300">次</span>
                        </div>
                        <div class="alarm_title">总数</div>
                    </div>
                    <div class="alarm_items">
                        <div class="alarm_item">
                            <span style="color: red; font-size: 22px" class="flashing">{{ stat.level_3 }}</span>
                            严重告警
                        </div>
                        <div class="alarm_item alarm_item1" @click="toAlarm(2)">
                            <span style="color: #fac328; font-size: 22px">{{ stat.level_2 }}</span>
                            中等告警
                        </div>
                        <div class="alarm_item" @click="toAlarm(1)">
                            <span style="color: #2b9d4a; font-size: 22px">{{ stat.level_1 }}</span>
                            一般告警
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">
                    <div class="triangle"></div>
                    <div>设备报警趋势</div>
                </div>
                <div class="content" v-if="deviceList && deviceList.length !== 0" ref="warn"></div>
            </div>
            <div>
                <div class="title">
                    <div class="triangle"></div>
                    <div>设备类型占比</div>
                </div>
                <div class="content" v-if="deviceList && deviceList.length !== 0" ref="device_type"></div>
            </div>
            <div>
                <div class="title">
                    <div class="triangle"></div>
                    <div>缺陷诊断</div>
                </div>
                <div class="content" v-if="selfreport" style="display: flex">
                    <div class="selfreport">
                        <div style="width: 49%" class="map_header_item">
                            <div class="item_right">
                                <span class="top">{{ selfreport.allNum }}</span>
                                <span class="buttom">测点总数</span>
                            </div>
                        </div>
                        <div style="width: 49%" class="map_header_item">
                            <div class="item_right">
                                <span class="top">{{ selfreport.errNum }}</span>
                                <span class="buttom">异常测点</span>
                            </div>
                        </div>
                        <div style="width: 100%" class="map_header_item">
                            <div class="item_right">
                                <span class="top">{{ selfreport.end_time }}</span>
                                <span class="buttom">最新异常时间</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="title">
                    <div class="triangle"></div>
                    <div>工单跟踪</div>
                </div>
                <div class="content">
                    <zy-table :tableData="noticeList" :tableColumn="tableColumn1"></zy-table>
                </div>
            </div>
        </div>
        <div class="warn">
            <div class="title">
                <div class="triangle"></div>
                <div>
                    <span class="pointer" :style="'color:' + (select === 1 ? '#0cd9e8' : '#fff')" @click="() => (this.select = 1)">巡检任务</span>
                    |
                    <span class="pointer" :style="'color:' + (select === 2 ? '#0cd9e8' : '#fff')" @click="() => (this.select = 2)">润滑任务</span>
                </div>
            </div>
            <div class="content">
                <zy-table :tableData="select === 1 ? pointList : oilingList" :tableColumn="tableColumn"></zy-table>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { deepClone } from '@/plugins/clone'
import { requestApi } from '@/requset/api'
import { mapState } from 'vuex'
import { column, column1 } from './formConfig.js'
import zyTable from '@/components/common/zyTableS.vue'
export default {
    components: {
        zyTable,
    },
    data() {
        return {
            options: [],
            scope_id: null,
            scope_id_list: null,
            deviceList: null,
            warnList: null,
            stat: null,
            selfreport: null,
            noticeList: null,
            tableColumn: null,
            tableColumn1: column1,
            pointList: null,
            oilingList: null,
            select: 1,
        }
    },
    computed: {
        ...mapState('backstage', ['backstageData']),
        operate() {
            return parseInt(sessionStorage.getItem('operate')) === 1
        },
        deviceByType() {
            if (!this.deviceList) return []
            let map = new Map()
            this.deviceList.map((item) => {
                if (map.has(item.type_name)) {
                    map.set(item.type_name, map.get(item.type_name) + 1)
                } else {
                    map.set(item.type_name, 1)
                }
            })
            let list = []
            map.forEach((value, name) => {
                list.push({
                    name,
                    value,
                })
            })
            return list
        },
        deviceByStatus() {
            if (!this.deviceList) return []
            let status = {
                0: 2,
                1: 0,
                2: 1,
                3: 3,
            }
            let list = [
                { name: '正常', color: '#6FAC46', num: 0, ratio: 0 },
                { name: '告警', color: '#FFFE00', num: 0, ratio: 0 },
                { name: '停机', color: '#B4C6E7', num: 0, ratio: 0 },
                { name: '离线', color: 'gray', num: 0, ratio: 0 },
            ]
            this.deviceList.map((item) => {
                list[status[item.status]].num++
            })
            list.map((item) => {
                item.ratio = ((item.num * 100) / this.deviceList.length).toFixed(1)
            })
            return list
        },
    },
    methods: {
        changeScope(data) {
            this.scope_id_list = data
            this.scope_id = this.scope_id_list[2]
            this.getDevice()
            this.getWarn()
            this.getSelfreport()
            this.getNotice()
            this.getPoint()
            this.getOiling()
        },
        getDevice() {
            requestApi('post', 'device/getlist', {
                device_name: null,
                page: 1,
                scope_id: this.scope_id,
                scope_id_list: this.scope_id_list,
                size: 999,
                type_id: null,
            }).then((res) => {
                this.deviceList = res.data.data
                this.drawDeviceType()
            })
        },
        getWarn() {
            requestApi('post', 'warn/allList', {
                page: 1,
                scope_id: this.scope_id,
                scope_id_list: this.scope_id_list,
                size: 999,
            }).then((res) => {
                this.warnList = res.data.data
                let stat = {
                    total: this.warnList.length,
                    level_1: 0,
                    level_2: 0,
                    level_3: 0,
                }
                this.warnList.map((item) => {
                    if (item.warn_level == 1) {
                        stat.level_1++
                    } else if (item.warn_level == 2) {
                        stat.level_2++
                    } else if (item.warn_level == 3) {
                        stat.level_3++
                    }
                })
                this.stat = stat
                this.drawDeviceType()
                this.drawWarn()
            })
        },
        getSelfreport() {
            requestApi('post', 'selfreport/getlist', {
                end_time: null,
                page: 1,
                scope_id: this.scope_id,
                scope_id_list: this.scope_id_list,
                size: 999,
                start_time: null,
                state: null,
            }).then((res) => {
                this.selfreport = res.data.data[0]
            })
        },
        getNotice() {
            requestApi('post', 'notice/getlist', {
                device_name: '',
                end_time: '',
                page: 1,
                scope_id: this.scope_id,
                scope_id_list: this.scope_id_list,
                size: 999,
                start_time: '',
                status: null,
            }).then((res) => {
                this.noticeList = res.data.data
            })
        },
        getPoint() {
            requestApi('post', 'point/plan/getlist', {
                cycle_id: null,
                cycle_type: null,
                device_name: '',
                id: null,
                plan_state: null,
                type_id: null,
                page: 1,
                scope_id: this.scope_id,
                scope_id_list: this.scope_id_list,
                size: 999,
            }).then((res) => {
                this.pointList = res.data.data
            })
        },
        getOiling() {
            requestApi('post', 'oiling/oplan/getlist', {
                cycle_id: null,
                cycle_type: null,
                device_name: '',
                id: null,
                plan_state: null,
                type_id: null,
                page: 1,
                scope_id: this.scope_id,
                scope_id_list: this.scope_id_list,
                size: 999,
            }).then((res) => {
                this.oilingList = res.data.data
            })
        },
        drawDeviceType() {
            // 确保DOM元素存在后再初始化ECharts
            this.$nextTick(() => {
                if (!this.$refs.device_type) {
                    console.warn('device_type DOM element not found')
                    return
                }
                let myChart = echarts.init(this.$refs.device_type, 'light')
            let option = {
                legend: {
                    orient: 'vertical',
                    top: '10%',
                    left: '6%',
                    textStyle: {
                        color: '#fff',
                    },
                    type: 'scroll',
                },
                graphic: [
                    {
                        type: 'text',
                        left: '58%', // 文本左上角的x坐标
                        top: '37%', // 文本左上角的y坐标
                        style: {
                            text: this.deviceList.length + '\n设备总数',
                            fontSize: '16px',
                            textAlign: 'center',
                            fill: '#fff',
                        },
                    },
                ],
                series: [
                    {
                        type: 'pie',
                        top: '10%',
                        radius: ['65%', '90%'],
                        center: ['65%', '40%'],
                        avoidLabelOverlap: true,
                        percentPrecision: 1,
                        label: {
                            show: true,
                            color: 'white',
                            position: 'outside',
                            width: 240,
                            overflow: 'break',
                            formatter: '{b}:{c}',
                        },
                        // label: {
                        //     show: true,
                        //     color: 'white',
                        //     position: 'inside',
                        //     width: 240,
                        //     overflow: 'break',
                        //     formatter: '{d}%',
                        // },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '16',
                                fontWeight: 'bold',
                            },
                        },
                        labelLine: {
                            show: true,
                        },
                        data: this.deviceByType,
                    },
                ],
            }

            // this.pie_shuffling(option, myChart)
                myChart.setOption(option)
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            })
        },
        drawWarn() {
            // 确保DOM元素存在后再初始化ECharts
            this.$nextTick(() => {
                if (!this.$refs.warn) {
                    console.warn('warn DOM element not found')
                    return
                }
                let myChart = echarts.init(this.$refs.warn)
            let list = deepClone(this.warnList)
            let dataX = []
            list.map((item) => {
                item.create_time = item.create_time.slice(0, 10)
                if (dataX.length < 8 && !dataX.includes(item.create_time)) {
                    dataX.unshift(item.create_time)
                }
            })
            let data1 = Array(dataX.length).fill(0)
            let data2 = Array(dataX.length).fill(0)
            let data3 = Array(dataX.length).fill(0)
            list.map((item) => {
                if (dataX.includes(item.create_time)) {
                    if (item.warn_level === 1) {
                        data1[dataX.indexOf(item.create_time)]++
                    } else if (item.warn_level === 2) {
                        data2[dataX.indexOf(item.create_time)]++
                    } else {
                        data3[dataX.indexOf(item.create_time)]++
                    }
                }
            })
            let option = {
                legend: {
                    type: 'plain',
                    // 修饰图例文字的颜色
                    textStyle: {
                        color: '#4c9bfd',
                    },
                },
                xAxis: {
                    axisLabel: {
                        textStyle: {
                            color: '#1FF8FD', // x轴文字颜色
                        },
                    },
                    type: 'category',
                    boundaryGap: false,
                    data: dataX,
                    // name: "日期",
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                    },
                    axisTick: {
                        show: false,
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        textStyle: {
                            color: '#5187AA', // x轴文字颜色
                        },
                    },
                    // 去除x坐标轴的颜色
                    axisLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'value',
                    // name: "纵轴名称",
                    minInterval: 1,
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                        color: 'red',
                    },
                    axisTick: {
                        show: false,
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        textStyle: {
                            color: '#5187AA', // x轴文字颜色
                        },
                    },
                    // 修改y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: '#284469',
                        },
                    },
                },
                // tooltip，鼠标放到折线图上展示的数据展示样式
                tooltip: {
                    trigger: 'axis',
                },
                series: [
                    {
                        name: '一般告警',
                        data: data1,
                        type: 'line',
                        itemStyle: {
                            color: '#2b9d4a', //折线点的颜色
                            lineStyle: {
                                color: '#2b9d4a', //折线的颜色
                            },
                        },
                    },
                    {
                        name: '中等告警',
                        data: data2,
                        type: 'line',
                        itemStyle: {
                            color: '#fac328', //折线点的颜色
                            lineStyle: {
                                color: '#fac328', //折线的颜色
                            },
                        },
                    },
                    {
                        name: '严重告警',
                        data: data3,
                        type: 'line',
                        itemStyle: {
                            color: 'red', //折线点的颜色
                            lineStyle: {
                                color: 'red', //折线的颜色
                            },
                        },
                    },
                ],
                grid: {
                    top: '18%',
                    left: '3%',
                    right: '6%',
                    bottom: '1%',
                    show: true,
                    borderColor: '#012f4a',
                    containLabel: true,
                },
            }
                myChart.setOption(option)
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            })
        },
    },
    filters: {},
    mounted() {
        let filter = (data) => {
            if (data.type === 'factory') {
                delete data.children
                return
            } else if (data.children && data.type !== 'zone') {
                data.children.map((item) => filter(item))
            } else return
        }
        this.options = deepClone(this.backstageData)
        this.options.map((item) => filter(item))
        this.scope_id_list = [this.options[0].value, this.options[0].children[0].value, this.options[0].children[0].children[0].value]
        this.scope_id = this.scope_id_list[2]
        this.getDevice()
        this.getWarn()
        this.getSelfreport()
        this.getNotice()
        this.getPoint()
        this.getOiling()
    },
    created() {
        column[column.length - 1].buttons = [
            {
                text: '查看报告',
                click: (val) => {
                    this.$router.push({
                        name: 'point_record',
                        params: {
                            plan_id: val.id,
                        },
                    })
                },
                icon: 'el-icon-s-comment',
            },
            // {
            //     text: '执行',
            //     click: (val) => this.handleCheck(val),
            //     if: (val) => val.plan_state === 2 && this.operate,
            //     icon: 'el-icon-video-play',
            // },
            // {
            //     text: '停止',
            //     click: (val) => this.handleCheck(val),
            //     if: (val) => val.plan_state === 1 && this.operate,
            //     icon: 'el-icon-switch-button',
            // },

            // {
            //     text: '删除',
            //     click: (val) => this.delete(val),
            //     if: () => this.operate,
            //     icon: 'el-icon-delete',
            // },
        ]
        this.tableColumn = column
    },
}
</script>

<style scoped lang="less">
#work {
    padding: 10px;
    height: 100%;
    .main {
        padding: 10px;
        height: calc(100% - 340px);
        display: grid;
        grid-template-columns: 2fr 2fr 3fr;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        > div {
            background-color: rgba(19, 39, 76, 0.7);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(73, 197, 251, 0.3);
        }
        .title {
            display: flex;
            align-items: center;
            margin-top: 10px;
            width: 160px;
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            padding-bottom: 10px;
            padding-left: 10px;
            border-bottom: 1px solid #24e0f1;
            .triangle {
                width: 0;
                height: 0;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-left: 8px solid #0d9af3;
                margin-right: 15px;
            }
        }

        .content {
            flex: 1;
            padding: 10px;
        }
    }
    .warn {
        height: 300px;
        margin: 0 10px;
        background-color: rgba(19, 39, 76, 0.7);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(73, 197, 251, 0.3);
        .title {
            display: flex;
            align-items: center;
            margin-top: 10px;
            width: 165px;
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            padding-bottom: 10px;
            padding-left: 10px;
            border-bottom: 1px solid #24e0f1;
            .triangle {
                width: 0;
                height: 0;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-left: 8px solid #0d9af3;
                margin-right: 15px;
            }
        }

        .content {
            flex: 1;
            padding: 10px;
        }
    }
    .health {
        width: 20%;
        height: 100%;
        background-image: url(@/assets/common/form_item_bg.png);
        background-size: 100% 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: 600;
        color: #b2e3ff;
        font-size: 16px;
        .top {
            position: absolute;
            left: 50%;
            top: 22%;
            transform: translateX(-50%);
        }
        .mid {
            position: absolute;
            left: 50%;
            top: 44%;
            transform: translateX(-50%);
        }
        .buttom {
            position: absolute;
            left: 50%;
            top: 66%;
            transform: translateX(-50%);
        }
    }
    .selfreport {
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .map_header_item {
            .item_right {
                // width: 160px;
                height: 100%;
                background-image: url(../../assets/Home/Home_item_bg1.png);
                background-size: 100% 100%;
                position: relative;
                flex-grow: 1;
                color: #00e4ff;
                .buttom {
                    position: absolute;
                    left: 50%;
                    font-size: 14px;
                    transform: translateX(-50%);
                    bottom: 22%;
                    font-weight: 600;
                    color: #b2e3ff;
                }
                .top {
                    position: absolute;
                    left: 50%;
                    top: 40%;
                    transform: translate(-50%, -50%);
                    font-size: 26px;
                    font-family: 'UnidreamLED';
                }
            }
        }
    }

    .alarm_total {
        position: absolute;
        left: 10%;
        // background-color: red;

        background-image: url(@/assets/Home/alarm_bg.png);
        background-size: 100% 100%;
        width: 30%;
        padding-bottom: 30%;

        display: flex;
        align-items: center;
        justify-content: center;

        .alarm_data {
            position: absolute;
            width: 100%;
            // background-color: red;
            text-align: center;
            font-size: 32px;
            font-weight: 600;
            top: 30%;
            color: #00e4ff;
        }

        .alarm_title {
            position: absolute;
            top: 60%;
            font-size: 18px;
            font-weight: 600;

            color: #ffffff;
        }

        img {
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 50;
        }
    }

    .alarm_items {
        height: 90%;
        position: absolute;
        top: 5%;
        right: 2%;
        width: 50%;
        display: flex;
        // align-items: flex-start;
        flex-direction: column;
        justify-content: space-around;

        // background-color: red;
        .alarm_item {
            width: 80%;
            height: 26%;
            background-image: url(@/assets/Home/menu_bg.png);
            // background-color: pink;
            background-size: 100% 100%;
            // line-height: 1;
            display: flex;
            align-items: center;
            // text-align: center;
            justify-content: center;
            color: #00e4ff;
            font-size: 14px;
            font-weight: 600;
            text-indent: 10px;
            transition: all 0.3s;
            cursor: pointer;
        }

        .alarm_item:hover {
            transform: scale(1.1);
        }

        .alarm_item1 {
            margin-right: 4%;
        }
    }
}
</style>
